<p><a href="https://en.wikipedia.org/wiki/Clickjacking">Clickjacking</a> attacks occur when an attacker try to trick an user to click on certain
buttons/links of a legit website. This attack can take place with malicious HTML frames well hidden in an attacker website.</p>
<p>For instance, suppose a safe and authentic page of a social network (https://socialnetworkexample.com/makemyprofilpublic) which allows an user to
change the visibility of his profile by clicking on a button. This is a critical feature with high privacy concerns. Users are generally well informed
on the social network of the consequences of this action. An attacker can trick users, without their consent, to do this action with the below
embedded code added on a malicious website:</p>
<pre>
&lt;html&gt;
&lt;b&gt;Click on the button below to win 5000$&lt;/b&gt;
&lt;br&gt;
&lt;iframe src="https://socialnetworkexample.com/makemyprofilpublic" width="200" height="200"&gt;&lt;/iframe&gt;
&lt;/html&gt;
</pre>
<p>Playing with the size of the iframe it’s sometimes possible to display only the critical parts of a page, in this case the button of the
<em>makemyprofilpublic</em> page.</p>
<h2>Ask Yourself Whether</h2>
<ul>
  <li> <a href="https://en.wikipedia.org/wiki/Clickjacking#Clickjacking_categories">Critical actions</a> of the application are prone to clickjacking
  attacks because a simple click on a link or a button can trigger them. </li>
</ul>
<p>There is a risk if you answered yes to this question.</p>
<h2>Recommended Secure Coding Practices</h2>
<p>Implement content security policy <em>frame-ancestors</em> directive which is supported by all modern browsers and will specify the origins of
frame allowed to be loaded by the browser (this directive deprecates <a
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options">X-Frame-Options</a>).</p>
<h2>Sensitive Code Example</h2>
<p>In Express.js application the code is sensitive if the <a href="https://www.npmjs.com/package/helmet-csp">helmet-csp</a> or <a
href="https://www.npmjs.com/package/helmet">helmet</a> middleware is used without the <code>frameAncestors</code> directive (or if
<code>frameAncestors</code> is set to <code>'none'</code>):</p>
<pre>
const express = require('express');
const helmet = require('helmet');

let app = express();

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      // other directives
      frameAncestors: ["'none'"] // Sensitive: frameAncestors  is set to none
    }
  })
);
</pre>
<h2>Compliant Solution</h2>
<p>In Express.js application a standard way to implement CSP frame-ancestors directive is the <a
href="https://www.npmjs.com/package/helmet-csp">helmet-csp</a> or <a href="https://www.npmjs.com/package/helmet">helmet</a> middleware:</p>
<pre>
const express = require('express');
const helmet = require('helmet');

let app = express();

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      // other directives
      frameAncestors: ["'example.com'"] // Compliant
    }
  })
);
</pre>
<h2>See</h2>
<ul>
  <li> OWASP - <a href="https://owasp.org/Top10/A04_2021-Insecure_Design/">Top 10 2021 Category A4 - Insecure Design</a> </li>
  <li> OWASP - <a href="https://owasp.org/Top10/A05_2021-Security_Misconfiguration/">Top 10 2021 Category A5 - Security Misconfiguration</a> </li>
  <li> OWASP - <a href="https://owasp.org/www-project-top-ten/2017/A6_2017-Security_Misconfiguration">Top 10 2017 Category A6 - Security
  Misconfiguration</a> </li>
  <li> <a href="https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html">OWASP Cheat Sheets</a> - Clickjacking Defense
  Cheat Sheet </li>
  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">developer.mozilla.org</a> -
  Frame-ancestors </li>
  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">developer.mozilla.org</a> - Content Security Policy (CSP) </li>
  <li> CWE - <a href="https://cwe.mitre.org/data/definitions/451">CWE-451 - User Interface (UI) Misrepresentation of Critical Information</a> </li>
  <li> <a href="https://www.w3.org/TR/CSP3/">w3.org</a> - Content Security Policy Level 3 </li>
</ul>
